<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PP-editor</title>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/widget.selector.css" type="text/css">
    <script src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
    <script src="js/editor.js"></script>
    <script src="js/util.js"></script>
	<script src="js/widget.selector.js"></script>
    <script src="js/work.js"></script>
    <script src="js/adjust.js"></script>
    <script src="js/special.js"></script>
    <script src="js/decoration.js"></script>
    <script src="js/frame.js"></script>
</head>
<body>
    <header>
        <div id="logo"><span>PP</span>editor</div>
        <ul id="category">
            <li class="active">常用</li>
            <li>特效</li>
            <li>涂鸦</li>
            <li>装饰</li>
            <li>文字</li>
            <li>边框</li>
        </ul>
        <ul id="op">
            <li>打开：</li>
            <li class="btn">相册</li>
            <li class="btn local">本地<input type="file" id="filea" name="filea" onchange="Action.work.loadMyPic(this)" /></li>
            <li class="btn">保存图片</li>
        </ul>
    </header>
    <div class="split-bar"></div>
    <div id="doc" class="clearfix">
        <div id="canvasBox">
            <canvas width="800" height="500"></canvas>
            <div id="adjSlider" class="adj-pop">
                <div>亮度:</div>
                <div></div>
                <div id="lightValue" class="slider-split-bar">0</div>
                <div>对比度:</div>
                <div></div>
                <div id="compareValue" class="slider-split-bar">0</div>
                <div>饱和度:</div>
                <div></div>
                <div id="saturateValue">0</div>
                <span class="x-cross">X</span>
            </div>
            <div id="resizer" class="resizer adj-pop">
                <div>
                    <span>宽:</span><input type="number" value="1" max="800" min="1" />px
                    <span>高:</span><input type="number" value="1" max="500" min="1" />px
                    <input type="checkbox" checked />等比例
                    <button>应用</button>
                </div>
                <span class="x-cross">X</span>
            </div>
            <div id="cliper" class="resizer adj-pop">
                <div>
                    <span>宽:</span><input type="number" value="1" max="800" min="1" />px
                    <span>高:</span><input type="number" value="1" max="500" min="1" />px
                    <input type="checkbox" checked />等比例
                    <button>应用</button>
                </div>
                <span class="x-cross">X</span>
            </div>
            <div id="cliperBox">
                <div class="cliper-border"></div>
                <div class="cliper-handler"></div>
                <div class="cliper-handler"></div>
                <div class="cliper-handler"></div>
                <div class="cliper-handler"></div>
				<div class="bar"></div>
				<div class="rotate-handler"></div>
            </div>
        </div>
        <div id="toolBox">
            <div>
                <div>
                    <div>常用调整</div>
                    <ul>
                        <!--
                        <li>
                            <img src="img/adj_adj.png"/>
                            <span>图片调整</span>
                        </li>
                        -->
                        <li>
                            <img src="img/adj_resize.png"/>
                            <span>图片大小</span>
                        </li>
                        <li>
                            <img src="img/adj_clip.png"/>
                            <span>裁剪图片</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <div>特效</div>
                    <ul>
                        <li>
                            <img src="img/spe_gray.png">
                            <span>gray</span>
                        </li>
                        <li>
                            <img src="img/spe_invert.png">
                            <span>invert</span>
                        </li>
                        <li>
                            <img src="img/spe_watermark.png">
                            <span>watermark</span>
                        </li>
                        <li>
                            <img src="img/spe_edge_detection.png">
                            <span>Detect Edges</span>
                        </li>
                        <li>
                            <img src="img/spe_neon_lines.png">
                            <span>Highlight Edges</span>
                        </li>
                        <li>
                            <img src="img/spe_black_white.png">
                            <span>Black & White Edges</span>
                        </li>
                        <li>
                            <img src="img/spe_color_book.png">
                            <span>Color Book</span>
                        </li>
                        <li>
                            <img src="img/spe_ripples.png">
                            <span>Ripples</span>
                        </li>
                        <li>
                            <img src="img/spe_glass_box.png">
                            <span>glassbox</span>
                        </li>
                        <li>
                            <img src="img/spe_bulge.png">
                            <span>Bulge</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <div>涂鸦画笔</div>
                    <ul>
                        <li>
                            <img src="img/doodle_normal.png"/>
                            <span>普通画笔</span>
                        </li>
                        <li>
                            <img src="img/doodle_mark0.png"/>
                            <span>马克笔</span>
                        </li>
                        <li>
                            <img src="img/doodle_mark1.png"/>
                            <span>马克笔</span>
                        </li>
                        <li>
                            <img src="img/doodle_mark2.png"/>
                            <span>马克笔</span>
                        </li>
                        <li>
                            <img src="img/doodle_mark3.png"/>
                            <span>马克笔</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <div>装饰</div>
                    <ul>
                        <li>
                            <img src="img/dec0.png"/>
                        </li>
                        <li>
                            <img src="img/dec1.png"/>
                        </li>
                        <li>
                            <img src="img/dec2.png"/>
                        </li>
                        <li>
                            <img src="img/word0.png"/>
                        </li>
                        <li>
                            <img src="img/word1.png"/>
                        </li>
                        <li>
                            <img src="img/word2.png"/>
                        </li>
                    </ul>
                </div>
                <div>
                    <div>文字</div>
                    <ul>
                        <li>
                            <img src="img/wordpop0.png"/>
                        </li>
                        <li>
                            <img src="img/wordpop1.png"/>
                        </li>
                        <li>
                            <img src="img/wordpop2.png"/>
                        </li>
                        
                    </ul>
                </div>
                <div>
                    <div>边框</div>
                    <ul>
                        <li>
                            <img src="img/frame0.png"/>
                        </li>
                        <li>
                            <img src="img/frame1.png"/>
                        </li>
                        <li>
                            <img src="img/frame2.png"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <footer></footer>
    <div id="dialog_album">
        <ul>
            <li><img src="res/album0.jpg" /></li>
            <li><img src="res/album1.jpg" /></li>
            <li><img src="res/album2.jpg" /></li>
            <li><img src="res/album3.jpg" /></li>
            <li><img src="res/album4.png" /></li>
            <li><img src="res/dog.png" /></li>
            <li><img src="res/dog2.png" /></li>
        </ul>
    </div>
    <img id="glassBoxImage" src="img/sphere.png" height="16;" width="16;">
    <div id="msg"></div>
    <div id="selectPicDialog">
        相册：<br><button>从相册选择</button>
        <hr>
        本地：<input type="file" id="file" name="file" onchange="Action.work.loadMyPic(this)" />
        <hr>
        拖拽：<br><span><strong>你可以</strong>关闭此窗口，直接拖动自己电脑上的照片到编辑区的！</span>
    </div>
</body>
</html>